<template>
  <div
    class="meun shadow-md fixed bg-light-50"
    :style="{ width: $store.state.menuWidth }"
  >
    <span class="logo">
      <!-- <el-icon class="mr-1">
                <Trophy />
            </el-icon> -->
      <svg
        t="1691921479320"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="14462"
        width="32"
        height="32"
      >
        <path
          d="M320 409.6c-57.6 0-108.8 12.8-160 38.4V256c0-38.4-32-64-76.8-64S12.8 217.6 12.8 256v480C25.6 896 160 1017.6 320 1017.6c166.4 0 307.2-134.4 307.2-307.2S486.4 409.6 320 409.6z m0 473.6c-83.2 0-153.6-57.6-166.4-134.4 0-12.8-6.4-25.6-6.4-38.4 0-25.6 6.4-51.2 12.8-70.4C192 576 249.6 537.6 320 537.6c96 0 172.8 76.8 172.8 172.8S416 883.2 320 883.2zM761.6 595.2c-32 0-57.6-25.6-57.6-57.6 0-128-108.8-230.4-236.8-230.4-32 6.4-57.6-19.2-57.6-51.2s25.6-57.6 57.6-57.6c185.6-6.4 352 147.2 352 339.2 0 32-25.6 57.6-57.6 57.6z"
          fill="#ffffff"
          p-id="14463"
        ></path>
        <path
          d="M953.6 595.2c-32 0-57.6-25.6-57.6-57.6 0-115.2-44.8-217.6-128-300.8-83.2-76.8-192-115.2-307.2-115.2-32 0-57.6-25.6-57.6-57.6s25.6-57.6 57.6-57.6c147.2 0 281.6 51.2 384 153.6 102.4 102.4 160 236.8 166.4 377.6 0 32-25.6 57.6-57.6 57.6z"
          fill="#ffffff"
          p-id="14464"
        ></path>
      </svg>
      <span style="margin-left: 10px" v-if="$store.state.menuWidth == '180px'">
        Blog System</span
      >
    </span>

    <el-menu
      :collapse="isCollapse"
      background-color="#001428"
      text-color="#fff"
      :default-active="defaultActive"
      :collapse-transition="false"
      unique-opened
      @select="handleSelect"
    >
      <el-menu-item index="/admin"
        ><el-icon><Monitor /></el-icon><span>仪表盘</span></el-menu-item
      >

      <!-- <template v-for="(item, index) in menus" :key="index">
                <el-menu-item :index="item.path" class="admin-el-menu-item">
                    <el-icon>
                        <component :is="item.icon"></component>
                    </el-icon>
                    <span>{{ item.name }}</span>
                </el-menu-item>
            </template> -->

      <el-sub-menu index="1">
        <template #title>
            <el-icon><Wallet /></el-icon>
          <span>博客管理</span>
        </template>
        <template v-for="(item, index) in blogmenus" :key="index">
          <el-menu-item :index="item.path" class="admin-el-menu-item">
            <el-icon>
              <component :is="item.icon"></component>
            </el-icon>
            <span>{{ item.name }}</span>
          </el-menu-item>
        </template>
      </el-sub-menu>

      <el-sub-menu index="2">
        <template #title>
            <el-icon><Setting /></el-icon>
          <span>系统管理</span>
        </template>
        <template v-for="(item, index) in settingmenus" :key="index">
          <el-menu-item :index="item.path" class="admin-el-menu-item">
            <el-icon>
              <component :is="item.icon"></component>
            </el-icon>
            <span>{{ item.name }}</span>
          </el-menu-item>
        </template>
      </el-sub-menu>
      
    </el-menu>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { computed, ref } from "vue";
import { useStore } from "vuex";

const router = useRouter();
const route = useRoute();
const store = useStore();

const defaultActive = ref(route.path);

// 是否折叠
const isCollapse = computed(() => !(store.state.menuWidth == "180px"));

const blogmenus = [
  {
    name: "文章管理",
    icon: "Document",
    path: "/admin/article/list",
    child: [],
  },
  {
    name: "分类管理",
    icon: "FolderOpened",
    path: "/admin/category/list",
    child: [],
  },
  {
    name: "标签管理",
    icon: "PriceTag",
    path: "/admin/tag/list",
    child: [],
  },
  
];
const settingmenus = [
 
  {
    name: "博客设置",
    icon: "Notification",
    path: "/admin/blog/setting",
    child: [],
  },
  {
    name: '个人设置',
    icon: 'User',
    path: '/admin/blog/mine',
    child: []
  },
];

const handleSelect = (e) => {
  console.log(defaultActive);
  console.log(route.path);

  router.push(e);
};
</script>

<style>
.meun {
  transition: all 0.2s;
  top: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #001428 !important;
}

.el-menu {
  border-right: 0;
}

.el-menu-item:hover {
  background-color: #ffffff10;
}
.meun::-webkit-scrollbar {
  width: 0;
}

.logo {
  height: 64px;
  background-color: #001428;
  color: #fff;
  @apply flex justify-center items-center text-xl font-thin;
}
</style>
